<script setup lang="ts">
import { useScene, useWorld } from '../../../../composables';
import BattleView from './battle.vue';
import ListView from './list.vue';
import PageContainer from '../../components/page.vue';

const { showBattleView, openBattleView, closeBattleView } = useScene();
const { back } = useWorld();
</script>

<template>
  <page-container title="世界 - 历练" :show-back-button="true" @back="back">
    <div class="scene overflow-auto h-full gap-2 relative">
      <list-view v-if="!showBattleView" @into="openBattleView"></list-view>
      <battle-view v-else @back="closeBattleView"></battle-view>
    </div>
  </page-container>
</template>

<style scoped>
.scene :deep(.ant-card-body) {
  padding: 16px;
}
</style>
